<template>
  <header class="header pt-2">
    <div class="header-content" ref="stickyElement">
      <div class="wrapper">
        <div class="flex justify-between py-3 items-end">
          <div class="logo flex items-start items-end">
            <router-link to="/" class="flex items-end justify-center">
              <el-image :src="Logo" alt="logo" style="height: 50px" />
              <h1 class="text-4xl font-800 ml-3 text-red-500">京东</h1>
            </router-link>
            <span class="mx-2 text-gray-300">|</span>
            <div class="">
              <span class="text-gray-400 text-2xl ml-2">购物车({{ cartCount }})</span>
            </div>
          </div>
          <div class="flex justify-between">
            <div class="flex items-center">
              <div class="search-wrapper">
                <div class="flex">
                  <div class="search-box bg-white pos-relative" ref="searchBoxRef">
                    <div class="flex items-center" style="padding: 2px 2.5px">
                      <div class="search-input flex items-center pl-2">
                        <el-icon><Search /></el-icon>
                        <input
                          placeholder="搜索商品"
                          value=""
                          class="no-border input-text rounded-xl ml-1"
                          clearable
                        />
                      </div>
                      <button
                        type="button"
                        @click="handleSearch"
                        class="search-btn bg-red-500 text-white"
                        style="width: 90px"
                        color="red"
                        size="large"
                      >
                        搜索
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { throttle } from "@/utils/util";
import Logo from "@/assets/logo.png";
import { StarFilled, Headset, Search } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

const cartCount = ref(0);

const stickyElement = ref<HTMLDivElement | null>(null);
const isSticky = ref(false);
// --搜索模块
const searchBoxRef = ref<HTMLDivElement | null>(null);
const searchText = ref("");
const handleSearch = () => {
  if (searchText.value) {
    router.push({
      path: "/search",
      query: {
        keyword: searchText.value,
      },
    });
  }
};

const handleScroll = () => {
  // 获取目标元素的DOM引用
  if (!stickyElement.value) return;

  // 获取元素距离文档顶部的距离
  const elementTop = stickyElement.value.offsetTop;
  // 获取当前滚动条垂直位置（跨浏览器兼容写法）
  const scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否应该吸顶
  isSticky.value = scrollTop > elementTop;
};
onMounted(() => {
  window.addEventListener("scroll", throttle(handleScroll, 150));
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
<style scoped lang="scss">
header {
  text-align: center;
}
.search-wrapper {
  .search-box {
    border: 1px solid red;
    border-radius: 10px;
    box-sizing: border-box;

    &.focus {
      border-bottom: 1px solid #fff !important;
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px;
    }

    .search-input {
      width: 320px;
      .input-text {
        width: 100%;
        padding: 0 10px 0 5px;
        height: 35px;
        &:focus {
          outline: none;
        }
      }
    }
    .search-btn {
      height: 35px;
      line-height: 1;
      @apply rounded-md  text-4 px-3 py-1  font-600;
    }
  }
}
.btn-item {
  padding: 5px 8px;
  background-color: #f5f5f5;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: pointer;
  &:hover {
    background-color: #eee;
  }
}
</style>
